<template>
    <!-- 后台侧边菜单栏 -->
    <el-menu style="height:100%;min-height: 100vh;border-right: transparent;" :default-openeds="['1', '3']"
         text-color="#fff" active-text-color="#ffd04b" :collapse-transition="false"
        :collapse="isCollapse" router>
        <div style="height: 60px; line-height: 60px; text-align: center;">
            <!-- <img src="../assets/logo.png" alt="" style="width: 20px;" /> -->
            <b v-show="!isCollapse" style="color:white;">宠物医院管理系统</b>
        </div>
        <div class="aside" v-for="item in menus" :key="item.id" >
            <div v-if="item.path">
                <el-menu-item :index="item.path" >
                    <i :class="item.icon"></i>
                    <span slot="title" >{{ item.name }}</span>
                </el-menu-item>
            </div>
            <div v-else>
                <el-submenu :index="item.id + ''">
                    <template slot="title">
                        <i :class="item.icon"></i>
                        <span slot="title">{{ item.name }}</span>
                    </template>
                    <div v-for="subItem in item.children" :key="subItem.id">
                        <el-menu-item :index="subItem.path">
                            <i :class="subItem.icon"></i>
                            <span slot="title">{{ subItem.name }}</span>
                        </el-menu-item>
                    </div>
                </el-submenu>
            </div>
        </div>
    </el-menu>
</template>

<script>
export default {
    name: "Aside",
    props: {
        isCollapse: Boolean
    },
    data() {
        return {
            menus: localStorage.getItem("menus") ? JSON.parse(localStorage.getItem("menus")) : [],
            opens: localStorage.getItem("menus") ? JSON.parse(localStorage.getItem("menus")).map(v => v.id + '') : []
        }
    }
}
</script>

<style  scoped>
.el-menu{
    background-color: rgb(2, 19, 39) !important;;
}
.aside{
    font-size: 10px;
}
.el-menu-item{
    background-color: black;
}
.el-menu-item.is-active {
  background-color: rgb(38, 52, 69) !important;
  color: black;
}
.el-menu-item:hover {
  background-color: rgb(38, 52, 69) !important;
}

.el-submenu__title:hover {
  background-color: rgb(38, 52, 69) !important;
}
/*解决收缩菜单文字不消失问题*/
.el-menu--collapse span {
  visibility: hidden;
}
</style>